<template>
    <view class="receiver-container">
        <view class="receiver-info-container">
            <view class="left-container">
                <span class="required">*</span>
                <span>收件人姓名：</span>
            </view>
            <view class="right-container">
                <input type="text" :value="receiverName" @input="$emit('update:receiverName', $event.detail.value)" />
            </view>
        </view>
        <view class="divider"></view>
        <view class="receiver-info-container">
            <view class="left-container">
                <span class="required">*</span>
                <span>收件人电话：</span>
            </view>
            <view class="right-container">
                <input type="text" :value="receiverMobile" @input="$emit('update:receiverMobile', $event.detail.value)" />
            </view>
        </view>
        <view class="divider"></view>
        <view class="receiver-info-container">
            <view class="left-container">
                <span class="required">*</span>
                <span>省/市/区：</span>
            </view>
            <view class="right-container">
                <uni-data-picker
                    ref="areaDialog"
                    placeholder=""
                    style="border: none"
                    :localdata="areas"
                    popup-title="请选择省/市/区"
                    v-model="currentArea"
                    @change="onAreaChanged"
                    @nodeclick="onNodeClick"
                    @popupopened="onPopupOpened"
                ></uni-data-picker>
                <img src="@/static/img/common/right_arrow.png" />
            </view>
        </view>
        <view class="divider"></view>
        <view class="receiver-info-container">
            <view class="left-container">
                <span class="required">*</span>
                <span>详细地址：</span>
            </view>
            <view class="right-container">
                <input type="text" :value="receiverAddress" @input="$emit('update:receiverAddress', $event.detail.value)" />
            </view>
        </view>
        <view class="divider"></view>
    </view>
</template>

<script setup>
import { onMounted, onBeforeMount, ref, watch } from 'vue';
import provinces from '@/static/json/province.json';
const areas = ref([]);
const props = defineProps({
    receiverName: String,
    receiverMobile: String,
    receiverArea: String,
    receiverAddress: String
});
const currentArea = ref('');
const emit = defineEmits(['update:receiverName', 'update:receiverMobile', 'update:receiverArea', 'update:receiverAddress']);
onBeforeMount(() => {
    areas.value = handleProvinces();
});
onMounted(() => {});
watch(
    () => props.receiverArea,
    (newValue) => {
        currentReceiverArea.value = newValue;
        const index = newValue.lastIndexOf(',');
        if (index === -1) {
            currentArea.value = '';
        } else {
            currentArea.value = newValue.substring(index + 1);
        }
    }
);
function handleProvinces() {
    const array = [];
    for (let item of provinces) {
        const obj = {};
        obj.text = item.name;
        obj.value = item.name;
        obj.children = handleCities(item.city);
        array.push(obj);
    }
    return array;
}
function handleCities(cities) {
    if (cities.length === 1) {
        return handleAreas(cities[0].area);
    } else {
        const array = [];
        for (let item of cities) {
            const obj = {};
            obj.text = item.name;
            obj.value = item.name;
            obj.children = handleAreas(item.area);
            array.push(obj);
        }
        return array;
    }
}
function showAreaDialog() {
    areaDialog.value.show();
}
function handleAreas(areas) {
    const array = [];
    for (let item of areas) {
        const obj = {};
        obj.text = item;
        obj.value = item;
        array.push(obj);
    }
    return array;
}
const currentReceiverArea = ref('');
function onNodeClick(e) {
    currentReceiverArea.value = currentReceiverArea.value.concat(e.value, ',');
}
function onPopupOpened() {
    currentArea.value = '';
    currentReceiverArea.value = '';
}
function onAreaChanged(e) {
    setTimeout(function () {
        currentReceiverArea.value = currentReceiverArea.value.substring(0, currentReceiverArea.value.length - 1);
        emit('update:receiverArea', currentReceiverArea.value);
    }, 10);
}
</script>

<style lang="scss" scoped>
@import '@/static/css/common.scss';
.receiver-container {
    @extend .column-container-layout;
    background-color: white;
    border-radius: 10px;
    padding: 10px;
    justify-content: flex-start;
    .receiver-info-container {
        @extend .row-layout;
        justify-content: space-between;
        align-items: center;
        padding: 15px 0;
        .left-container {
            @extend .row-layout;
            width: 30%;
            span {
                font-size: 14px;
            }
            .required {
                color: #e25111;
            }
        }
        .right-container {
            @extend .row-layout;
            justify-content: flex-end;
            align-items: center;
            flex: 1;
            :deep(.uni-data-tree-input) {
                .input-value-border {
                    border: none;
                    border-radius: 0;
                    .icon-clear {
                        display: none;
                    }
                    .selected-area {
                        .selected-list {
                            justify-content: flex-end;
                            span {
                                font-size: 16px;
                                color: black;
                            }
                        }
                    }
                }
            }
            :deep(.uni-data-tree-dialog) {
                .input-value-border {
                    border: none;
                    border-radius: 0;
                    .icon-clear {
                        display: none;
                    }
                }
                .selected-area {
                    color: black;
                    justify-content: flex-end;
                    font-size: 16px;
                    .uni-scroll-view {
                        .selected-list {
                            justify-content: flex-start;
                            span {
                                font-size: 14px;
                                color: black;
                            }
                        }
                    }
                }
            }
            :deep(.arrow-area) {
                display: none;
            }
            span {
                ont-size: 16px;
                color: black;
            }
            input {
                font-size: 16px;
                color: black;
                text-align: end;
            }
            img {
                width: 20px;
                height: 20px;
            }
        }
    }
}
</style>
